<!DOCTYPE html>
<html lang="en" xmlns:wicket>
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="application/javascript" src="../js/jquery-1.9.0.min.js"></script>
        <script type="application/javascript" src="../js/bootstrap.min.js"></script>
        <link rel="stylesheet" href = "../css/bootstrap.min.css">
    <style>
        .link-secondary{
            color: #5e5e5e;
        }
        blockquote{
            font-size: 14px;
        }
    </style>
    <title>练习首页</title>
</head>
<body>
    <div class="container-fluid">
        <div class="header">
            <div class="row">
                <div class="col-sm-2">
                    <a href="#"><img src="../img/logo-test.png" alt="logo"></a>
                </div>
                <div class="col-sm-10">
                    <a href="#"><img src="../img/banner-test.png" alt="banner"></a>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="row">
                <div class="col-sm-2">
                    <div class="menu">
                        <div class="panel-group" id="menuContainer">

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a href="#" class="pull-left">首页</a>
                                        <a href="#" class="pull-right">登出</a>
                                    </h3>
                                    <div class="clearfix"></div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                        <h3 class="panel-title">
                                            <a href="#" data-toggle="collapse" data-target="#cardRec" data-parent="#menuContainer">新舊證回收</a>
                                        </h3>
                                </div>
                                <div class="collapse panel-collapse" id="cardRec">
                                    <div class="panel-body">
                                        <ul class="list-unstyled">
                                            <li>
                                                <a href="#" class="link-secondary" data-toggle="collapse" data-target="#oldCardRec">舊證回收</a>
                                                <div class="collapse panel-collapse" id="oldCardRec">
                                                    <blockquote>
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <a href="#">發出文件</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">舊證清單管理</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">舊證接收</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">舊證回收紀錄新增</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">舊證回收明細</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">舊證上繳</a>
                                                            </li>
                                                        </ul>
                                                    </blockquote>

                                                </div>
                                            </li>
                                            <li>
                                                <a href="#" class="link-secondary" data-toggle="collapse" data-target="#cardNewRec">新证回收</a>
                                                    <div class="collapse panel-collapse" id="cardNewRec">
                                                        <blockquote>
                                                            <ul class="list-unstyled">
                                                                <li>
                                                                    <a href="#">新證回收接收</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">新證回收</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">新證回收清單打印</a>
                                                                </li>
                                                            </ul>
                                                        </blockquote>
                                                    </div>
                                                </li>
                                            </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a href="#" data-toggle="collapse" data-target="#fee" data-parent="#menuContainer">一般收費</a>
                                    </h3>
                                </div>
                                <div class="collapse panel-collapse" id="fee">
                                    <div class="panel-body">
                                        <ul class="list-unstyled">
                                            <li>
                                                <a href="#" class="link-secondary">Services</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a href="#" data-toggle="collapse" data-target="#vehicle" data-parent="#menuContainer">車輛服務</a>
                                    </h3>
                                </div>
                                <div class="collapse panel-collapse" id="vehicle">
                                    <div class="panel-body">
                                        <ul class="list-unstyled">
                                            <li>
                                                <a href="#" data-toggle="collapse" data-target="#specialCheck" class="link-secondary">特別檢驗</a>
                                                <div class="collapse panel-collapse" id="specialCheck">
                                                    <blockquote>
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <a href="#">申請</a>
                                                            </li>
                                                        </ul>
                                                    </blockquote>
                                                </div>
                                            </li>
                                            <li>
                                                <a href="#" data-toggle="collapse" data-target="#uniqueCard" class="link-secondary">特別車輛檢驗</a>
                                                <div class="collapse panel-collapse" id="uniqueCard">
                                                    <blockquote>
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <a href="#">申請</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">改期</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">收費</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">退費</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">登錄</a>
                                                            </li>
                                                        </ul>
                                                    </blockquote>
                                                </div>
                                            </li>
                                            <li>
                                                <a href="#" data-toggle="collapse" data-target="#supportCar" class="link-secondary">殘疾人士留用車位及車輛識別證</a>
                                                <div class="collapse panel-collapse" id="supportCar">
                                                    <blockquote>
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <a href="#">複檢</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">改期</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">收費</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">退費</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">登錄</a>
                                                            </li>
                                                        </ul>
                                                    </blockquote>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>



                        </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-10">

                </div>
            </div>
        </div>
</body>
</html>